﻿@page "/iOSPic"
@using iOSClub.WebSite.Models
@inject IJSRuntime Js
@inject IMessageService _message

<GridRow Type="flex" Justify="center">
    <GridCol Xs="24" Sm="24" Md="10" Lg="9" Xl="8" Xxl="8">
        <Card Class="login-form" Bordered="false">
            <Flex Gap="middle">
                <Image Src="iOS_Club_LOGO.png" Preview="false" Style="width:70px; height:70px"/>
                <div style="padding: 5px;max-width: calc(100% - 70px)">
                    <div class="title-btn" @onclick="Click">iOS Club of XAUAT 2025</div>
                    <Paragraph>群号: 952954710 <Icon Type="copy" @onclick="Callback" Theme="twotone"/></Paragraph>
                </div>
            </Flex>
            <Divider/>
            <img alt="" Src="/other/二维码.jpg" style="width: 100%"/>
            <div class="phone-desktop" style="text-align: center;margin-top: 18px">
                <p>扫一扫二维码，加入群聊</p>
            </div>
        </Card>
    </GridCol>
</GridRow>

@code
{
    private async Task Click()
    {
        await Js.InvokeVoidAsync("NavigateTo", SignRecord.ios.qqApi, SignRecord.ios.https);
    }

    private async Task Callback()
    {
        var result = await Js.InvokeAsync<bool>("copyText", "952954710");
        await _message.Info("复制" + (result ? "成功" : "失败"));
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await _message.Info("如果微信提示无法跳转，请复制群号");
        }
    }
}

<style>
    .login-form {
        border-radius: 10px;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 10px #c8c8c8;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 15px;
        max-width: 100vw
    }
    
    @@media screen and (max-width: 768px) {
        .login-form{
            margin-top: 20px;
            box-shadow: none;
        }
        .title-btn:hover {
            transform: scale(1);
        }
        
        .ant-layout-header, .footer{
            visibility: hidden;
        }
        
        .ant-layout-header{
            height: 2px;
        }
        
        .layout{
            background: #ffffff;
            max-height: 100vh;
        }
    }

    .title-btn {
        display: inline-block;
        transition: .2s;
        cursor: pointer;
        overflow: hidden; /* 超出部分隐藏 */
        white-space: nowrap; /* 禁止换行 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        width: 100%;
        border: none;
        font-size: 21px;
        font-weight: 500;
        color: #1c1f23;
    }

    .title-btn:hover {
        transform: scale(1.02);
    }
</style>